<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>17.4.3 鼠标和滚轮事件</title>
    <style>
      body {
        height: 1500px;
        width: 1500px;
        border: 1px solid red;
      }
      div {
        margin-top: 100px;
        margin-left: 100px;
        width: 300px;
        height: 300px;
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    //1. 客户端坐标
    const divDOM = document.getElementById('app');
    divDOM.addEventListener('click', (event) => {
      console.log(
        '事件发生时鼠标光标在客户端视口(浏览器可视区域X,Y轴)中的坐标:'
      );
      console.log(`Client coordinates: ${event.clientX}, ${event.clientY}`);
    });
    //2.页面坐标（在页面没有滚动时，pageX 和 pageY 与 clientX 和 clientY 的值相同。）
    divDOM.addEventListener('click', (event) => {
      console.log('事件发生时鼠标光标在页面坐标(整个页面)中的坐标:');
      console.log(`Page coordinates: ${event.pageX}, ${event.pageY}`);
    });
    //3.屏幕坐标
    divDOM.addEventListener('click', (event) => {
      console.log('事件发生时鼠标光标在物理设备屏幕中的坐标:');
      console.log(`Screen coordinates: ${event.screenX}, ${event.screenY}`);
    });
    //4.修饰键
    divDOM.addEventListener('click', (event) => {
      let keys = new Array();
      if (event.shiftKey) {
        keys.push('shift');
      }
      if (event.ctrlKey) {
        keys.push('ctrl');
      }
      if (event.altKey) {
        keys.push('alt');
      }
      //在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
      if (event.metaKey) {
        keys.push('meta');
      }
      console.log('Keys: ' + keys.join(',')); //Keys: shift,ctrl,alt,meta
    });
    //6. 鼠标按键
    divDOM.addEventListener('click', (event) => {
      console.log('鼠标按键类型:' + event.button);
    });
    //7. 额外事件信息
    divDOM.addEventListener('click', (event) => {
      console.log('鼠标额外事件信息:' + event.detail); //鼠标额外事件信息:11
    });
    //8.mousewheel事件
    document.addEventListener('mousewheel', (event) => {
      console.log('mousewheel:'+event.wheelDelta);//mousewheel:-180 mousewheel:180
    });
  </script>
</html>
